.succ-border {
  box-sizing: border-box;
  border: 2px solid var(--xz-status-succ-border);
}

.fail-border {
  box-sizing: border-box;
  border: 2px solid var(--xz-status-fail-border);
}

.warn-border {
  box-sizing: border-box;
  border: 2px solid var(--xz-status-warn-border);
}

/* ===================================================================================== */

.succ-bg {
  background-color: var(--xz-status-succ-bg);
}

.fail-bg {
  background-color: var(--xz-status-fail-bg);
}

.warn-bg {
  background-color: var(--xz-status-warn-bg);
}

/* ===================================================================================== */

.succ-clr {
  color: var(--xz-status-succ-bg);
}

.fail-clr {
  color: var(--xz-status-fail-bg);
}

.warn-clr {
  color: var(--xz-status-warn-bg);
}

.info-clr {
  color: var(--xz-status-info-bg);
}

/* ===================================================================================== */

.bg-zebra {
  position: relative;

  &:before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: 50px 50px; //默认background-repeat为repeat
    z-index: -1;
  }
}

.succ-bg-zebra {
  @extend .bg-zebra;

  &:before {
    background-image: linear-gradient(-45deg, var(--xz-status-succ-bg) 0%, var(--xz-status-succ-bg) 25%, transparent 25%, transparent 50%, var(--xz-status-succ-bg) 50%, var(--xz-status-succ-bg) 75%, transparent 75%, transparent 100%);
  }
}

.fail-bg-zebra {
  @extend .bg-zebra;

  &:before {
    background-image: linear-gradient(-45deg, var(--xz-status-fail-bg) 0%, var(--xz-status-fail-bg) 25%, transparent 25%, transparent 50%, var(--xz-status-fail-bg) 50%, var(--xz-status-fail-bg) 75%, transparent 75%, transparent 100%);
  }
}

.warn-bg-zebra {
  @extend .bg-zebra;

  &:before {
    background-image: linear-gradient(-45deg, var(--xz-status-warn-bg) 0%, var(--xz-status-warn-bg) 25%, transparent 25%, transparent 50%, var(--xz-status-warn-bg) 50%, var(--xz-status-warn-bg) 75%, transparent 75%, transparent 100%);
  }
}

/* ===================================================================================== */
.succ-hover {
  &:hover {
    box-shadow: 0 0 14px 1px rgba(0, 255, 0, 0.5) !important;
  }
}

.fail-hover {
  &:hover {
    box-shadow: 0 0 14px 1px rgba(255, 0, 0, 0.5) !important;
  }
}


.warn-hover {
  &:hover {
    box-shadow: 0 0 14px 1px rgba(234, 173, 0, 0.5) !important;
  }
}

/* ===================================================================================== */

.warn-heightlight {
  animation: animated-border 1.5s infinite;
}

@keyframes animated-border {
  0% {
    box-shadow: 0 0 0 0 rgba(227, 163, 0, 0.7);
  }

  100% {
    box-shadow: 0 0 0 10px rgba(227, 163, 0, 0);
  }
}